<template>
  <div>
    <h1>专家信息</h1>
    <el-button type="primary" @click="openAdd">添加专家</el-button>
    <el-table
      :data="specialist"
      style="width: 100%">
      <el-table-column
        prop="specialistId"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="specialistName"
        label="专家名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="specialistSex"
        label="性别"
        width="180">
        <template slot-scope="scope" >
          <span v-if="scope.row.specialistSex==1" >男</span>
          <span v-if="scope.row.specialistSex==2" >女</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="specialistAge"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="specialistDesc"
        label="描述"
        width="260">
      </el-table-column>
      <el-table-column
        label="操作"
        width="260">
        <template slot-scope="scope" >
          <el-button type="primary" @click="delSpecialist(scope.row.specialistId)">删除</el-button>
          <el-button type="primary" @click="openUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getSpecialistAll"
      @current-change="getSpecialistAll">
    </el-pagination>

    <el-dialog
      title="添加/修改专家"
      :visible.sync="dialogVisible"
      width="60%">
      <el-form ref="form" :model="expert" label-width="80px">
        <el-form-item label="专家名称">
          <el-input v-model="expert.specialistName"></el-input>
        </el-form-item>
        <el-form-item label="专家年龄">
          <el-input v-model="expert.specialistAge"></el-input>
        </el-form-item>
        <el-form-item label="专家性别">
          <el-radio-group v-model="expert.specialistSex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="专家简介">
          <el-input  v-model="expert.specialistDesc"  type="textarea" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSpecialist">立即创建</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>
<script>
import {getSpecialistAll,delSpecialist,addSpecialist} from '@/api/course'
export default {
  data(){
    return{
      pageNum:1,
      pageSize:4,
      specialist:[],
      total:0,
      dialogVisible:false,
      expert:{}
    }
  },
  mounted(){
    this.getSpecialistAll()
  },
  methods: {
    openUpdate(row){
      this.expert=row
      this.dialogVisible=true
    },
    addSpecialist(){
      addSpecialist(this.expert).then(res=>{
        alert(res.msg)
        this.expert={}
        this.dialogVisible=false
        this.getSpecialistAll()
      })
    },
    getSpecialistAll(){
      getSpecialistAll(this.pageNum,this.pageSize).then(res=>{
        if(res.data){
          this.specialist=res.data
          this.total=res.total
        }
      })
    },
    delSpecialist(id){
      delSpecialist(id).then(res=>{
        alert(res.msg)
        this.getSpecialistAll()
      })
    },
    openAdd(){
        this.expert={}
        this.dialogVisible=true
    }
  }
}
</script>
<style>

</style>
